<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>登录</title>
<!--                       CSS                       -->
<!-- Reset Stylesheet -->
<link rel="stylesheet" href="<%=path%>/resources/css/reset.css"
	type="text/css" media="screen" />
<!-- Main Stylesheet -->
<link rel="stylesheet" href="<%=path%>/resources/css/style.css"
	type="text/css" media="screen" />
<!-- Invalid Stylesheet. This makes stuff look pretty. Remove it if you want the CSS completely valid -->
<link rel="stylesheet" href="<%=path%>/resources/css/invalid.css"
	type="text/css" media="screen" />
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

a,img {
	border: 0;
}

.demo {
	margin: 100px auto 0 auto;
	width: 400px;
	text-align: center;
	font-size: 18px;
}

.demo .action {
	color: #3366cc;
	text-decoration: none;
	font-family: "微软雅黑", "宋体";
}

.overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 998;
	width: 100%;
	height: 100%;
	_padding: 0 20px 0 0;
	background: #f6f4f5;
	display: none;
}

.showbox {
	position: fixed;
	top: 0;
	left: 50%;
	z-index: 9999;
	opacity: 0;
	filter: alpha(opacity =       0);
	margin-left: -80px;
}

* html,* html body {
	background-image: url(about:blank);
	background-attachment: fixed;
}

* html .showbox,* html .overlay {
	position: absolute;
	top: expression(eval(document.documentElement.scrollTop) );
}

#AjaxLoading {
	border: 1px solid #8CBEDA;
	color: #37a;
	font-size: 12px;
	font-weight: bold;
}

#AjaxLoading div.loadingWord {
	width: 180px;
	height: 50px;
	line-height: 50px;
	border: 2px solid #D6E7F2;
	background: #fff;
}

#AjaxLoading img {
	margin: 10px 15px;
	float: left;
	display: inline;
}
</style>
<!--                       Javascripts                       -->
<!-- jQuery -->
<script type="text/javascript"
	src="<%=path%>/resources/scripts/jquery-1.3.2.min.js"></script>
<!-- jQuery Configuration -->
<script type="text/javascript"
	src="<%=path%>/resources/scripts/simpla.jquery.configuration.js"></script>
<!-- Facebox jQuery Plugin -->
<script type="text/javascript"
	src="<%=path%>/resources/scripts/facebox.js"></script>
<!-- jQuery WYSIWYG Plugin -->
<script type="text/javascript"
	src="<%=path%>/resources/scripts/jquery.wysiwyg.js"></script>

</head>
<body id="login">
	<div id="login-wrapper" class="png_bg">
		<div id="login-top">
			<h1>管理系统</h1>
			<!-- Logo (221px width) -->
			<a href="#"><img id="logo"
				src="<%=path%>/resources/images/logo.png" alt="Simpla Admin logo" />
			</a>
		</div>
		<!-- End #logn-top -->
		<div id="login-content">
			<form action="login.action" id="indexdiv" method="post">
				<div class="notification information png_bg">
					<div id="alarmDiv">输入用户名、密码，进行登录.</div>
				</div>
				<div id="logindiv">
					<p>
						<label style="font-size:16px">用&nbsp;&nbsp;户&nbsp;&nbsp;名</label>
						<input class="text-input" type="text" style="font-size:18px"
							name="user.loginname" />
					</p>
					<div class="clear"></div>
					<p>
						<label style="font-size:16px">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</label>
						<input class="text-input" type="password" name="user.password"	style="font-size:18px" />
					</p>
					<div class="clear"></div>
				</div>
				<div id="registerdiv" style="display:none">
					<p>
						<label style="font-size:16px">确认密码</label> <input
							class="text-input" type="password" name="user.repetpassword"
							style="font-size:18px" />

					</p>
					<div class="clear"></div>
					<p>
						<label style="font-size:16px">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label>
						<input class="text-input" type="text" style="font-size:18px"
							name="user.name" />
					</p>
					<div class="clear"></div>
					<p>
						<label style="font-size:16px">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱</label>
						<input class="text-input" type="text" style="font-size:18px"
							name="user.email" />
					</p>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>

				<div class="clear"></div>
				<div id="btnDiv">
					<a href="#" style="float:center">注册？</a>
					<!-- <a href="javascript:show()" style="float:center">注册？</a> -->&nbsp;&nbsp;&nbsp;
					<input class="button" type="submit" value="登    录"
						style="width:80px" style="margin-top:0px;" id="btnlogin" />
				</div>
			</form>
		</div>
		<!-- End #login-content -->
	</div>
	<div id="AjaxLoading" class="showbox">
		<div class="loadingWord">
			<img src="<%=path%>/resources/images/waiting.gif"></img>请稍等...
		</div>
	</div>
	
	<div style="height:1200px;"></div>
	<!-- End #login-wrapper -->
</body>
<script type="text/javascript">
	function show() {
		//register.action
		if ($("#registerdiv").css("display") == 'none') {
			$("#registerdiv").show(500);
			$("#btnlogin").val("注    册");
			$("#alarmDiv").html("<font color='yellow'>输入用户信息，进行注册.<br/>以下各项信息都是必须的.</font>");
			$("#indexdiv").attr("action", "register.action");
		} else {
			$("#registerdiv").hide(500);
			$("#btnlogin").val("登    录");
			$("#alarmDiv").html("输入用户名、密码，进行登录.");
			$("#indexdiv").attr("action", "login.action");
			
		}
	}

	$(document).ready(function() {
		var message = "<s:property value='#request.mess'/>";
		if(message!=''){
			$("#alarmDiv").html("<font color='yellow'>"+message+"</font>");
		}
		
		if (top.location.href != location.href){
			top.location.href = location.href;
		}
		
		var h = $(document).height();
		$("#login-wrapper").css({
			"height" : h
		});
		if ($("#registerdiv").css("display") == 'none') {
			$("#btnlogin").click(function() {
				$("#login-wrapper").css({
					'display' : 'block',
					'opacity' : '0.8'
				});

				$(".showbox").stop(true).animate({
					'margin-top' : '300px',
					'opacity' : '1'
				}, 200);

				setTimeout(function() {

					$(".showbox").stop(true).animate({
						'margin-top' : '250px',
						'opacity' : '0'
					}, 400);

					$("#login-wrapper").css({
						'display' : 'none',
						'opacity' : '0'
					});

				}, 800);

			});

		}

	});
</script>

</html>
